<template>
  <div class="detail">
    <div class="homeDetail">
      <!-- 1.商品展示区域  -->
      <div class="imgBox">
        <div class="imgList">
          <ul>
            <li
              v-for="(imgList, index) in detailList.imgUrl"
              :key="index"
              @click="changeImgIndex(index)"
            >
              <img :src="imgList" />
            </li>
          </ul>
        </div>
        <div class="bigImg">
          <div><img :src="bigImg" /></div>
        </div>
        <div class="imgMirror"></div>
      </div>
      <!-- 2.商品信息 -->
      <div class="goodsInfo">
        <div class="goodsInfoBox">
          <p class="infonItem goodsTitle">{{ detailList.title }}</p>
          <p class="infonItem goodsPrice">￥ {{ detailList.price }}</p>
          <div class="infonItem goodsMaterial">
            <p>货号：<span>WL41R1JS2000</span></p>
            <p>{{ detailList.detail }}</p>
          </div>
          <div class="infonItem sortItems">
            <div class="">
              颜色：<span
                :class="{ itemBorder: Dcolor.ischecked == 1 }"
                v-for="(Dcolor, index) in detailList.color"
                :key="index"
                @click="changeColorChecked(detailList.color, Dcolor)"
                >{{ Dcolor.colorname }}</span
              >
            </div>
            <div>
              尺寸：<span
                :class="{ itemBorder: Dsize.ischecked == 1 }"
                v-for="(Dsize, index) in detailList.size"
                :key="index"
                @click="changeSizeChecked(detailList.size, Dsize)"
                >{{ Dsize.sizename }}</span
              >
            </div>
          </div>
          <div class="infonItem goodsNum">
            <el-input-number size="mini" v-model="count"></el-input-number>
          </div>
          <div class="infonItem twoBtn">
            <div class="addShopCart" @click="buyNow">
              <button>立即购买</button>
            </div>
            <div class="buyNow" @click="addCart">
              <button>加入购物车</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="moreDetail">
      <Swiper :bannerList="detailList.brandInfo" :navBtn="false" 
        :pagBtn="false"></Swiper>
      <div class="detail2">
        <img :src="detailList.imgUrl[1]" />
        <img :src="detailList.imgUrl[2]" />
      </div>
      <div class="detail3">
        <img :src="detailList.imgUrl[3]" />
      </div>
    </div>
  </div>
</template>


<script>
import { mapState } from "vuex";
import { postShopCart } from "@/api";
export default {
  data() {
    return {
      count: 1,
      imgIndex: 0,
      colorname: "",
      sizename: "",
    };
  },
  mounted() {
    this.$store.dispatch("getDetailInfo");
  },
  computed: {
    ...mapState({
      detailList: (state) => state.detail.detailList,
    }),
    bigImg() {
      return this.detailList.imgUrl[this.imgIndex] || {};
    },
  },
  methods: {
    //根据小图改变主图
    changeImgIndex(index) {
      this.imgIndex = index;
    },
    //改变颜色选项框的位置
    changeColorChecked(colorList, colorInfo) {
      colorList.forEach((item) => {
        item.ischecked = 0;
      });
      colorInfo.ischecked = 1;
      this.colorname = colorInfo.colorname;
    },
    //改变尺寸选项框的位置
    changeSizeChecked(sizeList, sizeInfo) {
      sizeList.forEach((item) => {
        item.ischecked = 0;
      });
      sizeInfo.ischecked = 1;
      this.sizename = sizeInfo.sizename;
    },
    buyNow() {
      let subParams = {
        imgUrl: this.bigImg,
        isSelect: false,
        title: this.detailList.title,
        price: this.detailList.price,
        color: this.colorname,
        size: this.sizename,
        count: this.count,
      };
      this.$router.push("");
    },
    //加入购物车
    async addCart() {
      let color = this.detailList.color.filter((item) => item.ischecked == 1)[0]
        .colorname;
      let size = this.detailList.size.filter((item) => item.ischecked == 1)[0]
        .sizename;
      const cartList = {
        id: this.detailList.id,
        isSelect: false,
        imgurl: this.bigImg,
        title: this.detailList.title,
        color,
        size,
        num: this.count,
        price: this.detailList.price,
      };

      const res = await postShopCart(cartList);
      this.$router.push("/shopCart");
    },
  },
};
</script>

<style lang="less" scoped>
.homeDetail {
  display: flex;
  flex-direction: row;
  padding: 110px 0;
  border-bottom: 1px solid #333;
}
.imgBox {
  display: flex;
  flex-direction: row;
  width: 700px;
  height: 85vh;
  overflow: hidden;
  .imgList {
    width: 10%;
    li {
      text-align: right;
      margin-right: 10px;
    }
    img {
      width: 80%;
    }
  }
  .bigImg {
    width: 90%;
    text-align: center;
    box-sizing: content-box;
    div {
      width: 90%;
      margin: 0 auto;
      border: 1px solid #333;
      border-top: none;
      box-shadow: 0 0 10px #333;
      img {
        width: 100%;
      }
    }
  }
}
.goodsInfo {
  position: fixed;
  right: 10px;
  width: 400px;

  margin-left: 30px;
  .goodsInfoBox {
    width: 85%;
    .infonItem {
      margin-bottom: 22px;
    }
    .goodsTitle {
      font-size: 2em;
      line-height: 1.5em;
      font-weight: bold;
      padding-bottom: 22px;
      border-bottom: 1px solid #333;
    }
    .goodsPrice {
      font-size: 1.5em;
      color: red;
    }
    .sortItems {
      padding-top: 22px;
      border-top: 1px solid #333;
      span {
        margin-left: 13px;
        cursor: pointer;
      }
      .itemBorder {
        padding: 3px 8px;
        box-sizing: border-box;
        border: 1px solid #333;
      }
      div {
        margin-bottom: 15px;
      }
    }
    .twoBtn {
      width: 100%;
      button {
        width: 70%;
        margin-bottom: 10px;
        line-height: 33px;
        border: none;
        color: rgb(255, 255, 255);
        background-color: rgb(0, 0, 0);
      }
    }
  }
}
.moreDetail {
  width: 63%;
  text-align: center;
  padding: 110px 0;
  img {
    width: 80%;
  }
  .detail2 {
    width: 90%;
    margin: 20px auto;
    img {
      width: 50%;
    }
  }
  .detail3 {
    img {
      width: 50%;
      text-align: center;
    }
  }
}
</style>
